import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import MyScroll from '../../components/MyScroll/MyScroll';
import { Icon ,Button,Flex,List,Modal,DatePicker,Picker,ActionSheet,Toast,WingBlank} from 'antd-mobile';
import { tableDiv, dateDiv, tableClass, display, curC, nowC, noHaveC } from "./DateSelect.less";

import triangleRight from '../../assets/img/triangleRight.svg';
import triangleLeft from '../../assets/img/triangleLeft.svg';

class FootPrint extends Component {
    constructor(props) {
        super(props);
        var nowDate = new Date();

        console.warn(nowDate, nowDate.getDate(), '月份');

        this.state = {
            showYear: nowDate.getUTCFullYear(),
            showMonth: nowDate.getMonth(),// 0-11
            showDay: nowDate.getDate(),
            selected: "",
            nowDate,
            curList: [],
        };
    }
    setMonth = n => {
        if (this.state.showMonth == 0 && n == -1) {
            this.setState({showYear: this.state.showYear - 1, showMonth: 11})
        } else if (this.state.showMonth == 11 && n == 1) {
            this.setState({showYear: this.state.showYear + 1, showMonth: 0})
        } else {
            this.setState({showMonth: this.state.showMonth + n})
        }
    }

    nToS = n => n > 9 ? n : `0${n}`
    componentDidMount(){
        // this.setState({selectList: this.dateList(this.props.month)});
        // console.log(this.state, "state...");
    }

    // 获取当前月份天数方法
    monthDate = (month, year) => {
      const monthDate = new Date(year, month, 0).getDate();
      return monthDate;
    }

    // 每个月1号对应的星期几
    startWeek = (month, year) => {
      let myDate = new Date();
      myDate.setFullYear(year);
      myDate.setMonth(month);
      myDate.setDate(1);
      let startWeek = myDate.getDay();
      return startWeek;
    }

    // 每月日期数组
    dateList = (month, year) => {
        const prevMonthNum = this.startWeek(month - 1, year);

        const startWeek = this.startWeek(month, year);
        const monthNum = this.monthDate(month, year);
        const dateNum = startWeek + monthNum;

        var dateArr = [];
        var curDate = [];
        var numAdd = 1;

        for (let i = 0; i < dateNum; i++) {


            if (i >= startWeek) {
                curDate.push(numAdd++);
            } else {
                curDate.push('');
                // curDate.push(prevMonthNum - startWeek + i);
            };

            if ((i != 0 && (i + 1) % 7 == 0) || i == dateNum - 1) {
              dateArr.push(curDate);
              //在这里清空currData
              curDate = [];
            };

        }
        // console.warn(startWeek, "1号是星期几");
        // console.warn(dateArr, "数据。。。");
        return dateArr;

    }

    // 每月份天数
    dateNumFn = month => {
      const startWeek = this.startWeek(month);// 0-6
      const monthDate = this.monthDate(month);
      const dateNum =  startWeek + monthDate;
      let dateArr = [];//用来装处理完的数组
      let numAdd = 1;
      let currData = []; //子数组用来存分割完的数据

      for (let i = 0; i < dateNum; i++) {
        //dateNum[i]添加到子数组
        if (i >= startWeek) {
          currData.push( numAdd++ );
        } else if(i < startWeek){ // startWeek ！= 6
          currData.push('');
        }
        //在这里求7的余数,如果i不等于0,且可以整除 或者考虑到不满7个或等于7个的情况就要加上  i等于当前数组长度-1的时候
        if((i != 0 && (i + 1) % 7 == 0) || i == dateNum - 1) {
          dateArr.push(currData);
          //在这里清空currData
          currData = [];
        }
      };

      return {startWeek, dateArr};
    }


    render() {
        const week = ['日', '一', '二', '三', '四', '五', '六'];
        const { selectDay, prenMonth, curMonth, curYear = 2018, curDay, showAll, selectList = [], setDay, setShow } = this.props;
        const { selected, nowDate, curList, showYear, showMonth, showDay } = this.state;
        const nowDay = (new Date()).getDate();
        const nowYear = (new Date()).getUTCFullYear();
        const nowMonth = (new Date()).getMonth();


        const judgmentNext = nowYear > showYear ? true : nowMonth > showMonth;
        // console.warn(judgmentNext, nowYear > showYear, nowMonth > showMonth, '判断。。。。。。。。。。。。。。');

        // selectDay 选择日期 fun...
        // prenMonth 上个月   fun...
        // year 年   str...
        // month 月   str...

        // console.warn(setShow, "DateSelect -->> selectList    List");
        return (
            <div className={ dateDiv }>
                {
                    showAll &&
                    <p style={{margin: '.1rem 0'}}>
                        <Icon size='md' type={ triangleLeft.id } style={{transform: 'translate(-.3rem, .1rem)'}} onClick={() => this.setMonth(-1)} />
                        { `${ showYear }-${ this.nToS(showMonth + 1) }-${ this.nToS(showDay) }` }
                        <Icon size='md' type={ triangleRight.id } style={{transform: 'translate(.3rem, .1rem)', opacity: judgmentNext ? 1 : 0}} onClick={() => nowYear >= judgmentNext && this.setMonth(1)} />
                    </p>
                }

                <div className={tableDiv}>
                    <div style={{height: '.6rem', lineHeight: '.6rem'}}>
                        <p>日</p>
                        <p>一</p>
                        <p>二</p>
                        <p>三</p>
                        <p>四</p>
                        <p>五</p>
                        <p>六</p>
                    </div>
                    {
                        this.dateList(+showMonth, showYear).map((v, i) => {
                            return (
                                <div key={i} className={ showAll || v.includes(+curDay) ? '' : display }>
                                    {
                                        v.map((vv, ii) => {
                                            let isState = selectList.includes(`${ showYear }-${ this.nToS(showMonth + 1) }-${ this.nToS(vv) }`);
                                            let isDay = curYear == showYear && curMonth == showMonth && curDay == vv;
                                            let isNow = showYear == nowYear && showMonth == nowMonth && vv == nowDay;
                                            let curClass = '';

                                            // console.log(isState, isDay, isNow, vv, "判断。。。", {curYear, curMonth, curDay}, {showYear, showMonth, showDay}, {nowYear, nowMonth, nowDay}, );

                                            if (!isState) curClass = noHaveC;
                                            if (isDay) curClass = curC;
                                            if (isNow) curClass = isDay ? curC : nowC;
                                            return (
                                                <p key={ii}>
                                                    <span
                                                        className={ curClass  }
                                                        onClick={ () => {
                                                            if (isState || isNow) setDay(`${ showYear }-${ this.nToS(showMonth + 1) }-${ this.nToS(vv) }`)
                                                        }}
                                                        >
                                                            { vv }
                                                    </span>
                                                    <i></i>
                                                </p>
                                            )
                                        })
                                    }
                                </div>
                            )
                        })
                    }

                    <p onClick={() => setShow(!showAll)} style={{margin: '0', paddingBottom: '.2rem'}}>
                        { showAll ? '收起日历' : '展开日历' }
                        <Icon style={{transform: 'translate(.1rem, .05rem)'}} type={ showAll ? 'up' : 'down' } />
                    </p>
                </div>

                {/* <table className={ tableClass }>
                    <tbody>
                        <tr>
                            <th>日</th>
                            <th>一</th>
                            <th>二</th>
                            <th>三</th>
                            <th>四</th>
                            <th>五</th>
                            <th>六</th>
                        </tr>

                        {
                            this.dateList(+showMonth, showYear).map((v, i) => {
                                return (
                                    <tr key={i} className={ showAll || v.includes(+curDay) ? '' : display }>
                                        {
                                            v.map((vv, ii) => {
                                                let isState = selectList.includes(`${ showYear }-${ this.nToS(showMonth + 1) }-${ this.nToS(vv) }`);
                                                let isDay = curYear == showYear || curMonth == showMonth || curDay == showDay;
                                                let isNow = curYear == nowYear || curMonth == nowMonth || curDay == nowDay;
                                                let curClass = '';

                                                if (isNow) curClass = nowC;
                                                if (isDay) curClass = curC;
                                                if (!isState) curClass = noHaveC;
                                                return (
                                                    <td key={ii}>
                                                        <span
                                                            className={ curClass  }
                                                            onClick={ () => {
                                                                if (isState || isNow) setDay(`${ year }-${ this.nToS(month + 1) }-${ this.nToS(vv) }`)
                                                            }}
                                                            >
                                                                { vv }
                                                        </span>
                                                        <i></i>
                                                    </td>
                                                )
                                            })
                                        }
                                    </tr>
                                )
                            })
                        }
                    </tbody>

                    <tfoot>
                        <tr>
                            <td colspan='7' onClick={() => setShow(!showAll)}>
                                { showAll ? '收起日历' : '展开日历' }
                                <Icon style={{transform: 'translate(.1rem, .05rem)'}} type={ showAll ? 'up' : 'down' } />
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table> */}
            </div>

        );

    }
}


export default FootPrint;
